<html>
	<head>
		<script type="text/javascript" src="../../jslib/jCanvaScript.1.5.1.js"></script>
		<!--[if IE]>
			<script type="text/javascript" src="../../jslib/excanvas.js"></script>
		<![endif]-->

		<!--and here is our code:-->
		<script type="text/javascript">
			function simpleExample() {
				//initialization by canvas id
				jc.start('canvas_1');
				//than we can draw some object
				//(see 'objects' in the left navigation menu)
				jc.circle(100,100,50,'rgba(255,0,0,0.5)',1);
				//we can create another object and use some function
				//(see more in 'functions')
				jc.rect(150,40,50,60,1).rotate(30,'center');
				.animate({
					radius:100
				},2000);
				//and we need to redraw canvas in the end
				jc.start('canvas_1')
;
			}

			function start() {
				//initialization by canvas id
				//second parameter is isAnimated - set it to true, if you want to
				//canvas auto-redraws (it's necessary for animation)
				jc.start('canvas_2',true);
				//than we can draw some object
				//(see 'objects' in the left navigation menu)
				//and animate it
				jc.circle(100,100,50,'rgba(255,0,0,0.5)',1)
				.animate({
					radius:100
				},2000);
			}

			function stop() {
				//we can stop animation on a canvas
				jc.clear('canvas_2');
			}
			
			window.onload = function(){
				simpleExample();
				var inputs = document.getElementsByTagName('input');
				for(var i = 0; i < inputs.length; i++){
					switch(inputs[i].value){
						case 'start':
							inputs[i].onclick = function(){
								start();
							}
							break;
						case 'stop':
							inputs[i].onclick = function(){
								stop();
							}
							break;
					}
				}
			};
		</script>
		<head>
			<body>
				<canvas height="200" width="500" id="canvas_1"></canvas>
				
				<input type="button" value="start"/>
				<input type="button" value="stop"/>
				<canvas height="200" width="500" id="canvas_2"></canvas>
			</body>
</html>